<!-- 从业者端-完善信息-工作证明 -->
<template>
	<view class="container">
		<!-- 步骤条 -->
		<u-steps :list="stepsList" :current="3" active-color="#03B8CD" mode="number">
		</u-steps>
		
		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode" :range="range" @confirm="confirm"></u-picker>
		
		<!-- 有无毕业证 -->
		<view class="graduation-container">
			<text class="required">*</text>
			<text class="graduation-title">有无工作证明：</text>
			<u-radio-group    v-model="value" @change="radioGroupChange" :activeColor="activeColor">
				<u-radio  active-color="#03B8CD" v-for="(item, index) in list" :disabled="item.disabled"
					:key="index" :name="item.name"
				>{{item.name}}</u-radio>
			</u-radio-group>
		</view>


		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 提交的this.$refs.form.validate验证，一定是需要有form标签的ref="form"来对应的，否则会报错 -->
			<u-form :model="form" ref="form" :rules="rules">
				<!-- 上传工作证明 -->
				<view class="form-section" v-if="result == '有'">
					<view class="section-title">
						<view class="select-text">
							<text class="required">*</text>
							<text>上传工作证明</text>
							<text class="section-subtitle">优先上传图片格式，确保图中文字清晰可识别</text>
						</view>						
						<view	class="custom-link"	@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/工作证明/工作证明.png')" >
							工作证明示例
						</view>
					</view>
					<view class="">
						<u-upload
						  ref= "upload"
						  :action="action" 
							:file-list="form.licenseFiles" 
							@on-list-change="workOnchange"
							 @on-remove="(e) => workDeletePic(e, index)"
							:multiple="false" 
							max-count="1"
							upload-text="上传工作证明"
							:custom-btn="true"
							:auto-upload="false"
							>
							<!-- 自定义上传图片 -->
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
							</view>
						</u-upload>
					</view>

				</view>
				
				<!-- 上传工作经历承诺书 -->
				<view class="form-section" v-else>
					<view class="section-title">
						<view class="">
							<text class="required">*</text>
							<text>上传工作经历承诺书</text>
							<text class="section-subtitle">优先上传图片格式，确保图中文字清晰可识别</text>
						</view>
						<view	class="custom-link"
							@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/工作证明/工作承诺书.png')">
							工作承诺书示例
						</view>
						<!-- <u-link href="#"   color="#03B8CD">上传工作经历承诺书</u-link> -->
					</view>
					<u-upload 
					   ref= "upload"
					  :action="action" 
						:file-list="form.workJllicenseFiles" 
						@on-list-change="workJlOnchange" 
						@on-remove="(e) => workCrDeletePic(e, index)"
						:multiple="false" 
						max-count="1"
						upload-text="上传工作经历承诺书" 
						:custom-btn="true"
						:auto-upload="false"
						>
						<!-- 自定义上传图片 -->
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>
				
				<!-- 企业工商信息截图 -->						
				<view class="form-section">
					<view class="section-title">
						<view class="">
							<text class="required">*</text>
							<text>企业工商信息截图(企查查)</text>
							<text class="section-subtitle">确保图中文字清晰可识别</text>
						</view>
						<view
							class="custom-link"
							@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/工作证明/企业工商信息 - 企查查.png')">
							企业工商信息示例
						</view>
						<!-- <u-link href="#" color="#03B8CD">工商信息截图</u-link> -->
					</view>
					<u-upload 
				    	ref= "upload"
					   :action="action" 
						 :file-list="form.photoFiles" 
						 @on-list-change="bussOnchange" 
						 @on-remove="(e) => bussDeletePic(e, index)"
						 :multiple="false" 
						 max-count="1"
						 upload-text="企业工商信息截图" 
						 :custom-btn="true"
						 :auto-upload="false"
						 >
						<!-- 自定义上传图片 -->
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>		


				<!-- 职业性质 -->
				<view class="form-section">
					<u-form-item label="职业性质" prop="occupation" label-width="240">
						<u-input v-model="form.occupation" placeholder="请输入职业性质" clearable @click="showChange('selector')" :focus="false" disabled/>
					</u-form-item>
				</view>

				<!-- 毕业时间 -->
				<view class="form-section">
					<u-form-item label="*参加工作日期" prop="startDate" label-width="240">
						<u-input v-model="form.startDate" placeholder="参加工作日期" clearable @click="showChange('start')" :focus="false" disabled />
					</u-form-item>
				</view>
				
				<!-- 从事职业 -->
				<view class="form-section">
					<u-form-item label="*从事职业" prop="name" label-width="240">
						<u-input v-model="form.engagedOccupation" placeholder="请输入从事职业" clearable />
					</u-form-item>
				</view>
				
				<!-- 职业年限 -->
				<view class="form-section">
					<u-form-item label="*职业年限" prop="name" label-width="240">
						<u-input v-model="form.yearService" placeholder="请输入数字，支持小数点后一位" clearable />
					</u-form-item>
				</view>
				
				<!-- 工作单位 -->
				<view class="form-section">
					<u-form-item label="*工作单位" prop="name" label-width="240">
						<u-input v-model="form.workUnit" placeholder="请输入工作单位" clearable />
					</u-form-item>
				</view>



				<!-- 按钮组 -->
				<view class="button-group">
					<u-button type="default" @click="handlePrev" shape="circle" plan :custom-style="customStyleObject">
						上一步
					</u-button>
					<u-button type="default" @click="handleNext" shape="circle" :loading="loading" :custom-style="customStyleObjectBut">
						信息无误，下一步
					</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				// 有无学历选择
				value: '有',
				result: '有',
				activeColor: '#03B8CD',
				list: [
					{
						name: '有',
						checked: true,
						disabled: false
					},
					{
						name: '无法提供',
						checked: false,
						disabled: false
					}
				],
				// 日历 
				show: false,
				btnType: "primary",
				inputType: "", //判断是起始日期还是有效日期
				
				// picker弹窗
				pickerShow: false,
				mode: "selector",
				range:  ['硕士生以上', '硕士', '本科', '专科'],

				loading: false,
				//图片上传地址
				action: 'http://127.0.0.1:7001/upload',
				// 图片数组
				licenseFiles: [],
				// 步骤条
				stepsList: [{
						name: "申报信息"
					},
					{
						name: "身份证件"
					},
					{
						name: "学历证明"
					},
					{
						name: "工作证明"
					},
					{
						name: "相关证书"
					},
				],
				
				form: {
					occupation: '', //职业性质
					startDate: '', //参加工作时间
					engagedOccupation: '',///从事职业
					yearService: '' ,///职业年限
					workUnit: '' ,////工作单位					
					// 图片数组
					licenseFiles: [], ///工作证明 
					licenseFilesId: '', //工作证明ID
					photoFiles: [], //企业查查
					photoFilesId: '' ,///企业查查ID	
					workJllicenseFiles:[], ///工作经历承诺书
					workJllicenseFilesId:'' ///工作经历承诺书Id
				},
				base64Data: '',
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					color:"#03B8CD"

				},
				customStyleObjectBut: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
				},
				rules: {
					companyName: [{
						required: true,
						message: '请输入营业执照名称',
						trigger: 'blur'
					}],
					creditCode: [{
							required: true,
							message: '请输入社会信用代码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return /^[0-9A-Z]{18}$/.test(value);
							},
							message: '请输入18位统一社会信用代码',
							trigger: ['blur', 'change']
						}
					],
					legalPerson: [{
						required: true,
						message: '请输入法人姓名',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择起始日期',
						trigger: 'change'
					}]
				},
				ischanage: false
			}
		},
		onShow() {
			// 获取工作经历
			if(!this.ischanage) {
				this.getWorkJl()
			} else {
				// 若是图片变化则还还原
				this.ischanage = false
			}
			
		},
		methods: {
			getWorkJl() {
				this.$u.api.querykzgzzm({
					"usercode": uni.getStorageSync('usercode'), ///#用户编号
				}).then(res => {
					console.log('工作经历：', res)
					let baseinfo = res.data.base_info
					this.form = {
						occupation: baseinfo.cykzgzzm_zyxz, //职业性质
						startDate: baseinfo.cykzgzzm_gzsj, //参加工作时间
						engagedOccupation: baseinfo.cykzgzzm_cszy,///从事职业
						yearService: baseinfo.cykzgzzm_zynx ,///职业年限
						workUnit: baseinfo.cykzgzzm_gzdw ,////工作单位	
						licenseFilesId: baseinfo.cykzgzzm_gzzmuri[0].imguri, //工作证明ID
						photoFilesId: baseinfo.cykzgzzm_qygsuri[0].imguri ,///企业查查ID
						workJllicenseFilesId: baseinfo.cykzgzzm_cnsuri[0].imguri ///工作经历承诺书Id
					}
					this.form.licenseFiles= [] ///工作证明
					this.form.photoFiles= [] //企业查查
					this.form.workJllicenseFiles= []   ///工作经历承诺书
					let headeruri = this.chanageArray(baseinfo.cykzgzzm_gzzmuri)
					this.form.licenseFiles = [...this.form.licenseFiles, ...headeruri];
					let photouri = this.chanageArray(baseinfo.cykzgzzm_qygsuri)
					this.form.photoFiles = [...this.form.photoFiles, ...photouri];
					let jlphotouri = this.chanageArray(baseinfo.cykzgzzm_cnsuri)
					this.form.workJllicenseFiles = [...this.form.workJllicenseFiles, ...jlphotouri];
					this.ischanage = true
					console.log('edit:',this.form)
				})
			},
			
			// 存储成数组对象
			chanageArray(uri) {
				// 存储成数组对象
				return  uri.map(item => ({
					url: item.url, // 临时路径
				}))
				
			},		
			
			
			// 营业执照上传
			// 图片上传，不管是否成功都会触发
			onchange(res, index, list) {
				this.licenseFiles = list;
				console.log("onchange:", this.licenseFiles)
			},

			// Picker弹窗
			showChange(type) {
				if(type == 'start') {
					// 工作时间
					this.inputType = type;
					this.mode = 'time';
					this.show = !this.show;					
				} else if (type == 'selector'){
					// 职业性质
					this.inputType = type;
					this.mode = 'selector';
					this.range = ['全职', '兼职', '外包'];
					this.show = !this.show;
				} 

			},
			
			// 单选项
			radioGroupChange(e) {
				console.log('rg:',e)
				this.result = e
				
			},

			// 日历选择
			change(e) {
				// 赋值给相应的输入执照起始日期
					this.form.startDate = e.result;
			},
			
			// picker选择选择确认
			confirm(e) {
				if (this.inputType == 'selector') {
					// 赋值学历
					this.form.occupation = this.range[e[0]];					
				} else if(this.inputType == 'start') {
					this.form.startDate =  e.year + '-' + e.month + '-' + e.day
				}	else {
					// 赋值地区
					this.form.selectRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},
			
			// 图片变化开始			
			// 上传Base64数据到服务器
			uploadBase64(index) {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}	
				uni.showLoading({
					title: '上传中...'
				})		
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('usercode'),
					"rescode": this.base64Data,
					"restype": index,
					"resdesc": "上传照片"
				}).then(res => {					
					// 存储图片的ID
					if(index == 0) {
						this.form.licenseFilesId = res.data.base_info
						console.log('uploadres-licenseFilesId:', this.form.licenseFilesId)
					} else if (index == 1){
						this.form.photoFilesId = res.data.base_info
						console.log('uploadres-photoFilesId:', this.form.photoFilesId)
					} else if (index == 2) {
						this.form.workJllicenseFilesId = res.data.base_info
						console.log('uploadres-workJllicenseFilesId:', this.form.workJllicenseFilesId)
					}
			   this.ischanage = true
				})
			},			
			
			// 当工作经历图片变化时
			workOnchange(list,name) {
				if(this.form.licenseFiles.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.licenseFiles = []
						// this.certificates[name].photoList = file.url
						this.form.licenseFiles = [...this.form.licenseFiles, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(0)
						})					
					}
				}
				
			},	
	
			// 当企业查查变化时
			bussOnchange(list,name) {
				if(this.form.photoFiles.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.photoFiles = []
						// this.certificates[name].photoList = file.url
						this.form.photoFiles = [...this.form.photoFiles, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(1)
						})					
					}
				}				
			},	
			
			// 工作承诺书图片变化时
			workJlOnchange(list,name) {
				if(this.form.workJllicenseFiles.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.workJllicenseFiles = []
						// this.certificates[name].photoList = file.url
						this.form.workJllicenseFiles = [...this.form.workJllicenseFiles, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(2)
						})					
					}
				}		
			},
			// 图片上传结束			
			
			
			// 删除图片
			workDeletePic(event, index) {
				this.form.licenseFiles.splice(event, 1)
			},
			
			bussDeletePic(event, index) {
				this.form.photoFiles.splice(event, 1)
			},			
	
			workCrDeletePic() {
				this.form.workJllicenseFiles.splice(event, 1)
			},

			// 上一步
			handlePrev() {
				// uni.navigateBack();
				uni.reLaunch({
					url: '/pages/Practitioner/perfectData/educational'
				});
			},

			// 下一步
			handleNext() {
				this.$u.api.createkzgzzm({
					"usercode": uni.getStorageSync('usercode'), //#用户code
					"cykzgzzmywgzzm": this.value,//#有无工作证明，有或者无法提供
					"cykzgzzmgzzmuri": this.form.licenseFilesId,//#工作证明图片uri
					"cykzgzzmqygsuri": this.form.photoFilesId,//#公司工商信息截图uri
					"cykzgzzmcnsuri":  this.form.workJllicenseFilesId,//#工作经历承诺书图uri
					"cykzgzzmzyxz":  this.form.occupation,//#职位性质
					"cykzgzzmgzsj":  this.form.startDate,//#参加工作时间
					"cykzgzzmcszy":  this.form.engagedOccupation,//#从事职业
					"cykzgzzmzynx":  this.form.yearService,//#职业年限
					"cykzgzzmgzdw":  this.form.workUnit,//#工作单位
				}).then(res=>{
					console.log('工作经历：', res)
					uni.reLaunch({
						url: '/pages/Practitioner/perfectData/relatedProof'
					});
				})
				

				
				// 验证跳转
				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;

				// 	if (this.licenseFiles.length === 0) {
				// 		return this.$u.toast('请上传营业执照');
				// 		// console.log('toast请上传营业执照');
				// 	}

				// 	this.loading = true;

				// 	// 模拟API调用
				// 	setTimeout(() => {
				// 		this.loading = false;
				// 		uni.navigateTo({
				// 			url: '/pages/Practitioner/perfectData/idCard'
				// 		});
				// 	}, 1000);
				// });
			},
			previewImage(imageUrl) {
				console.log('预览成功',imageUrl);
				// 确保URL格式正确
				const fullUrl = imageUrl.startsWith('http') ? imageUrl : `https://${imageUrl}`;		
						console.log('预览成功-1',fullUrl);
				// 微信小程序图片预览
				uni.previewImage({
					urls: [fullUrl], // 需要预览的图片链接列表
					current: 0, // 当前显示图片的索引
					success: () => {
						console.log('预览成功');
					},
					fail: (err) => {
						console.log('预览失败', err);
						uni.showToast({
							title: '预览失败',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;


		.slot-btn {
			width: 104px;
			height: 104px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
			margin-left: 10px;
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}
		
		// 有无毕业证书
		.graduation-container {	
			display: flex;
			
			.required {
				margin-left: 20px;
				color: #f56c6c;
				margin-right: 8rpx;
			}
			
			.graduation-title {
				margin-right: 30px;
				font-size: 16px;
			}
			
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.form-section {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-content: flex-start;
				align-items: center;


				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;

					.required {
						color: #f56c6c;
						margin-right: 8rpx;
					}
				}

				.section-subtitle {
					font-size: 26rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}		


			// /deep/ .u-form-item__label {
			// 	.required {
			// 		color: #f56c6c;
			// 		margin-right: 8rpx;
			// 	}
			// }

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
		.custom-link {
		  color: #03B8CD;
			font-size: 28rpx;
		  // text-decoration: underline;
		  // padding: 10rpx 0;
		}
	}
</style>